import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { toJS } from 'mobx';
import { Condition, getAdButtons } from './list/listCondition';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import { WeaRightMenu, WeaTop, WeaTab, WeaErrorPage, WeaTools } from 'ecCom';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('crmBirthdayStore')
@observer
class CrmBirthday extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.doInit(this.props);
  }

  doInit(props) {
    const { location, crmBirthdayStore } = props;
    const { initDatas, doSearch } = crmBirthdayStore;
    initDatas();
    doSearch();
  }

  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    // 点击菜单路由刷新组件
    if (keyOld !== keyNew) {
      const { crmBirthdayStore } = nextProps;
      const { initDatas, doSearch, resetTable } = crmBirthdayStore;
      // crmBirthdayStore.clearStatus();
      initDatas();
      doSearch();
      // resetTable();
    }
  }

  componentWillUnmount() {
    const { crmBirthdayStore } = this.props;
    crmBirthdayStore.clearStatus();
    crmBirthdayStore.resetTable();
  }

  render() {
    const { crmBirthdayStore } = this.props;
    const { title, loading, tableStore, showSearchAd, form, selectedKeys } = crmBirthdayStore;
    const bts = [{
      icon: <i className="icon-coms-search" />,
      content: getLabel(197, '搜索'),
      key: 0,
    }, {
      icon: <i className="icon-coms-Custom " />,
      content: getLabel(382660, '显示定制列'),
      key: 1,
    }];
    // bts.push({
    //   icon: <i className="icon-coms-search" />,
    //   content: getLabel(197, '搜索'),
    //   key: 0,
    // });
    // bts.push({
    //   icon: <i className="icon-coms-Custom " />,
    //   content: getLabel(382660, '显示定制列'),
    //   key: 1,
    // });
    return (
      <WeaRightMenu
        ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@l8uvtv`}
        datas={bts}
        onClick={this.onRightMenuClick}
        collectParams={{
          favname: title,
          favouritetype: 4,
          importantlevel: 1,
          objid: -1,
        }}
      >
        <WeaTop
          ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@wrae9k`}
          title={title}
          loading={loading}
          icon={<i className="icon-coms-crm" />}
          iconBgcolor="#96358a"
          buttons={[]}
          buttonSpace={10}
          showDropIcon
          dropMenuDatas={bts}
          onDropMenuClick={this.onRightMenuClick}
        >
          <WeaTab
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@97bnox`}
            buttonsAd={getAdButtons(crmBirthdayStore, this.props.ecId || '')}
            searchType={['base', 'advanced']}
            searchsBaseValue={form.getFormParams().firstName}
            setShowSearchAd={this.setShowSearchAd}
            hideSearchAd={this.setShowSearchAd}
            searchsAd={
              <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@l6l5jo`} listStore={crmBirthdayStore} form={form} onEnterSearch={this.onEnterSearch} /></div>
            }
            showSearchAd={showSearchAd}
            onSearch={crmBirthdayStore.doSearch}
            onSearchChange={this.onSearchChange}
            // onChange={this.changeData}
          />

          <WeaTable
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@i2bzjp`}
            comsWeaTableStore={tableStore}
            hasOrder
            needScroll
            selectedKeys={selectedKeys}
          />
        </WeaTop>
      </WeaRightMenu>);
  }
  getRightMenu=() => {
    const btns = [];
    btns.push({
      icon: <i className="icon-coms-search" />,
      content: getLabel(197, '搜索'),
      key: 0,
    });
    btns.push({
      icon: <i className="icon-coms-Custom " />,
      content: getLabel(382660, '显示定制列'),
      key: 1,
    });
    return btns;
  }

  onRightMenuClick=(key) => {
    const { crmBirthdayStore } = this.props;
    if (key == '0') {
      crmBirthdayStore.doSearch();
    }
    if (key == '1') {
      crmBirthdayStore.onShowColumn();
    }
  }

  onEnterSearch=() => {
    const { doSearch, setShowSearchAd } = this.props.crmBirthdayStore;
    doSearch();
    setShowSearchAd(false);
  }

  setShowSearchAd=(bl = false) => {
    const { setShowSearchAd } = this.props.crmBirthdayStore;
    setShowSearchAd(bl);
  }

  onSearchChange=(v) => {
    const { crmBirthdayStore } = this.props;
    if (crmBirthdayStore.form.has('firstName')) {
      crmBirthdayStore.appendFormFields({ firstName: { value: v } });
    } else {
      crmBirthdayStore.form.add(v, { key: 'firstName' });
    }
  }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@c5tcwd`} msg={props.error ? props.error : getLabel(129417, '服务器运行出错，请联系系统管理员！')} />,
  { error: '' },
)(CrmBirthday);
